<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>学生端 - 电视猪在线答题系统 V1.0.0</title>
        <style>
            button,
            input[type = "submit"] {
                /* 按钮美化 */
                width: 270px;
                /* 宽度 */
                height: 40px;
                /* 高度 */
                border-width: 0;
                /* 边框宽度 */
                border-radius: 3px;
                /* 边框半径 */
                background: #1E90FF;
                /* 背景颜色 */
                cursor: pointer;
                /* 鼠标移入按钮范围时出现手势 */
                outline: none;
                /* 不显示轮廓线 */
                font-family: Microsoft YaHei;
                /* 设置字体 */
                color: white;
                /* 字体颜色 */
                font-size: 17px;
                /* 字体大小 */
            }
            button:hover {
                /* 鼠标移入按钮范围时改变颜色 */
                background: #5599FF;
            }
            input[type = "text"] {
                outline-style: none;
                border: 1px solid #ccc;
                border-radius: 3px;
                padding: 14px;
                width: 620px;
                font-size: 16px;
            }
            body {
                background-image: url("https://static.runoob.com/images/mix/paper.gif");
                background-color: #cccccc;
            }
            * {
                margin: 0;
                padding: 0;
            }

            ul {
                list-style: none;
            }

            .main {
                width: 800px;
                margin: 0 auto;
                text-align: center;
                overflow: hidden;
            }

            .title {
                margin-top: 30px;
                font-size: 30px;
                font-weight: bold;
            }

            .info {
                margin-top: 30px;
            }

            .info li {
                margin-top: 10px;
            }

            .question {
                width: 400px;
                margin: 30px auto;
                text-align: left;
            }

            .questionType {
                font-size: 18px;
                font-weight: bold;
            }

            .questionTitle {
                margin-top: 10px;
                font-size: 18px;
            }

            .option {
                margin-top: 10px;
            }

            .sub {
                margin: 20px;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div class="title">电视猪在线答题系统 V1.0.0</div>
            <form action="/" method="post">
                <ul class="info">
                    <li>
                        <label>姓名：<input type="text" name="name"></label>
                    </li>
                    <li>
                        <label>学校：<input type="text" name="qcls"></label>
                    </li>
                </ul>
                {% for temp in data %}
                    {# 判断题型 #}
                    {% if temp[1] != '多选题' %}
                        {# ['索引', '题型', '题目', '选项A', '选项B', '选项C', '选项D', '选项E', '选项F', '答案'] #}
                        <ul class="question">
                            <li class="questionType">{{ temp[1] }}</li>
                            <li class="questionTitle">{{ temp[2] }}</li>
                            {% if temp[3] != None %}
                                <li class="option">
                                    <label><input type="radio" name="{{ temp[0] }}" value="A">{{ temp[3] }}</label>
                                </li>
                            {% endif %}
                            {% if temp[4] != None %}
                                <li class="option">
                                    <label><input type="radio" name="{{ temp[0] }}" value="B">{{ temp[4] }}</label>
                                </li>
                            {% endif %}
                            {% if temp[5] != None %}
                                <li class="option">
                                    <label><input type="radio" name="{{ temp[0] }}" value="C">{{ temp[5] }}</label>
                                </li>
                            {% endif %}
                            {% if temp[6] != None %}
                                <li class="option">
                                    <label><input type="radio" name="{{ temp[0] }}" value="D">{{ temp[6] }}</label>
                                </li>
                            {% endif %}
                            {% if temp[7] != None %}
                                <li class="option">
                                    <label><input type="radio" name="{{ temp[0] }}" value="E">{{ temp[7] }}</label>
                                </li>
                            {% endif %}
                            {% if temp[8] != None %}
                                <li class="option">
                                    <label><input type="radio" name="{{ temp[0] }}" value="F">{{ temp[8] }}</label>
                                </li>
                            {% endif %}
                        </ul>
                    {% else %}
                        <ul class="question">
                            <li class="questionType">{{ temp[1] }}</li>
                            <li class="questionTitle">{{ temp[2] }}</li>
                            {% if temp[3] != None %}
                                <li class="option">
                                    <label><input type="checkbox" name="{{ temp[0] }}" value="A">{{ temp[3] }}</label>
                                </li>
                            {% endif %}
                            {% if temp[4] != None %}
                                <li class="option">
                                    <label><input type="checkbox" name="{{ temp[0] }}" value="B">{{ temp[4] }}</label>
                                </li>
                            {% endif %}
                            {% if temp[5] != None %}
                                <li class="option">
                                    <label><input type="checkbox" name="{{ temp[0] }}" value="C">{{ temp[5] }}</label>
                                </li>
                            {% endif %}
                            {% if temp[6] != None %}
                                <li class="option">
                                    <label><input type="checkbox" name="{{ temp[0] }}" value="D">{{ temp[6] }}</label>
                                </li>
                            {% endif %}
                            {% if temp[7] != None %}
                                <li class="option">
                                    <label><input type="checkbox" name="{{ temp[0] }}" value="E">{{ temp[7] }}</label>
                                </li>
                            {% endif %}
                            {% if temp[8] != None %}
                                <li class="option">
                                    <label><input type="checkbox" name="{{ temp[0] }}" value="F">{{ temp[8] }}</label>
                                </li>
                            {% endif %}
                        </ul>
                    {% endif %}
                {% endfor %}
                <div class="sub"><input type="submit" value="提交"></div>
            </form>
        </div>
    </body>
</html>